<template>
  <div>
    <template v-if="data && data.length">
      <div class="tree-wrap" v-for="(item, index) in data" :key="index">
        <TreeItem
          :disabled="disabled"
          :item="item"
          :level="0"
          :valueKey="valueKey"
          :childrenName="childrenName"
          :checkedName="checkedName"
        ></TreeItem>
      </div>
    </template>
    <template v-else>
      <div class="tips">
        暂无数据
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'CheckTree',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    valueKey: {
      type: String,
      default: 'title'
    },
    childrenName: {
      type: String,
      default: 'children'
    },
    checkedName: {
      type: String,
      default: 'isChecked'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      level: 0
    };
  },
  methods: {
    emitEvent(eventName, data) {
      this.$emit(eventName, data, this.data);
    }
  },
  components: {
    TreeItem: () => import('./TreeItem.vue')
  }
};
</script>

<style lang="scss" scoped>
/* 无数据提示 */
.tips {
  height: 50px;
  border: 1px solid #d6d9e9;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  color: #999999;
  margin-bottom: 4px;
}

.tree-wrap {
  border-radius: 4px;
  border: 1px solid #cbcee3;
  background: #ffffff;
  min-height: 50px;
  box-sizing: border-box;
  padding: 0 15px;
  margin-bottom: 5px;
  position: relative;
  overflow: hidden;
}
.tree-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #eff0f8;
}
</style>
